import { useMemo } from 'react'
import Border from './dataV/border'
import { bus } from './store'

export default function Header() {
  const mergedColor = ['#4fd2dd', '#235fa7']
  const height = 100, width = 200
  const xPos = pos => (!true ? pos : width - pos)
  const [pointsOne, pointsTwo, pointsThree] = useMemo(
    () => [
      `${xPos(0)}, 0,${xPos(30)}, ${height / 2}`,
      `${xPos(20)}, 0,${xPos(50)}, ${height / 2},${xPos(width)}, ${height / 2}`,
      `${xPos(0)}, ${height - 3}, ${xPos(200)}, ${height - 3}`
    ],
    [true, width, height]
  )
  return (
    <Border style={{ height: '12vh', lineHeight: '12vh', textAlign: 'center', fontSize: '30px', color: '#fff' }}>
      <div className="header" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
        <svg style={{ transform: 'rotateZ(180deg) rotateX(180deg)' }}>
          <polyline
            stroke={mergedColor[0]}
            strokeWidth='2'
            fill='transparent'
            points={pointsOne}
          />

          <polyline
            stroke={mergedColor[0]}
            strokeWidth='2'
            fill='transparent'
            points={pointsTwo}
          />

          <polyline
            stroke={mergedColor[1]}
            fill='transparent'
            strokeWidth='3'
            points={pointsThree}
          />
        </svg>
        <header style={{ display: 'block' }}>航班信息查看<span className='trigger' onClick={() => {
          bus.emit('pause')
        }} style={{ cursor: 'pointer', fontSize: '15px', position: 'relative' }}>FAQ<span className="title">
            尝试选择一个省份查看信息。点击FAQ可暂停旋转，数据均为随机生成模拟，用于展示效果，更多信息请查看readme文档
          </span></span></header>
        <svg>
          <polyline
            stroke={mergedColor[0]}
            strokeWidth='2'
            fill='transparent'
            points={pointsOne}
          />

          <polyline
            stroke={mergedColor[0]}
            strokeWidth='2'
            fill='transparent'
            points={pointsTwo}
          />

          <polyline
            stroke={mergedColor[1]}
            fill='transparent'
            strokeWidth='3'
            points={pointsThree}
          />
        </svg>
      </div>
    </Border>
  )
}
